<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-i18n="cat-printer">Cat Printer</title>
    <link rel="stylesheet" href="main.css" />
    <link rel="icon" href="icon.svg" />
</head>
<body class="hard-animation">
    <main class="hard-hidden">
        <div class="menu-side">
            <h1 id="title" data-i18n="cat-printer">Cat Printer</h1>
            <div id="notice">
            </div>
            <div class="menu">
                <div class="panel" id="panel-print" data-default>
                    <div data-hide-as="print">
                        <label for="device-options" data-i18n="device-">Device:</label>
                        <select id="device-options" data-key>
                        </select>
                        <button id="device-refresh" data-i18n="scan" data-key>Scan</button>
                        <hr />
                    </div>
                    <div class="input-group">
                        <span class="label-span-input">
                            <span data-i18n="process-as-">Process as:</span>
                            <span>
                                <label>
                                    <input type="radio" name="algo" value="algo-steinberg" data-key checked />
                                    <span data-i18n="picture">Picture</span>
                                </label>
                                <label>
                                    <input type="radio" name="algo" value="algo-halftone" data-key />
                                    <span data-i18n="pattern">Pattern</span>
                                </label>
                                <label>
                                    <input type="radio" name="algo" value="algo-direct" data-key />
                                    <span data-i18n="text">Text</span>
                                </label>
                            </span>
                        </span>
                        <!-- "brightness" is historically "threshold" -->
                        <label class="label-span-input">
                            <span data-i18n="brightness-">Brightness:</span>
                            <input type="range" min="0" max="256" value="86" step="1" name="threshold" data-key data-default />
                        </label>
                        <!-- Thermal "Strength", so-called "darkness", or internally "energy" -->
                        <label class="label-span-input" data-hide-as="print">
                            <span data-i18n="strength-">Strength:</span>
                            <input type="range" min="0" max="256" value="64" step="32" name="energy" data-key data-default />
                        </label>
                        <!-- "Quality", just speed of paper feeding, but slower makes better heating -->
                        <label class="label-span-input" data-hide-as="print">
                            <span data-i18n="quality-">Quality:</span>
                            <input type="range" min="28" max="40" value="36" step="4" name="quality" data-key data-default />
                        </label>
                    </div>
                    <label class="label-input-span">
                        <input type="checkbox" name="rotate" data-key />
                        <span data-i18n="rotate-image">Rotate Image</span>
                    </label>
                    <label class="label-input-span" data-hide-as="print">
                        <input type="checkbox" name="transparent-as-white" data-key checked />
                        <span data-i18n="transparent-as-white">Transparent as White</span>
                    </label>
                    <div class="center">
                        <button data-i18n="show-more-options" data-show="print" data-once data-key>Show More Options</button>
                    </div>
                </div>
                <div class="panel active" id="panel-help">
                    <div>
                        <p data-i18n="coming-soon">Coming Soon...</p>
                        <p>
                            <a href="about.html" target="frame" data-i18n="about" data-key>About</a>
                            <a href="jslicense.html" data-jslicense="1" target="frame"
                            data-i18n="javascript-license-information" data-key>JavaScript License Information</a>
                        </p>
                    </div>
                </div>
                <div class="panel" id="panel-settings">
                    <div class="input-group">
                        <label class="label-span-input">
                            <span data-i18n="scan-time-">Scan Time:</span>
                            <input type="number" name="scan-time" min="1" max="10" value="4" data-key />
                            <span data-i18n="-seconds">seconds</span>
                        </label>
                    </div>
                    <label class="label-input-span">
                        <input type="checkbox" name="flip" data-key />
                        <span data-i18n="cat-face-toward">Cat Face Toward</span>
                    </label>
                    <!-- <hr /> -->
                    <label class="label-input-span">
                        <input type="checkbox" name="dry-run" data-key />
                        <span data-i18n="dry-run">Dry Run</span>
                    </label>
                    <!-- <label class="label-input-span">
                        <input type="checkbox" name="dump" data-key />
                        <span data-i18n="dump-traffic">Dump Traffic</span>
                    </label> -->
                    <button id="set-accessibility" data-key>
                        <span>🌎</span>
                        <span data-i18n="accessibility">Accessibility</span>
                    </button>
                    <button id="test-unknown-device" data-i18n="test-unknown-device" data-key>Test Unknown Device</button>
                    <button class="hidden" data-panel="panel-error" data-i18n="error-message" data-key>Error Message</button>
                    <div class="center">
                        <button id="button-exit" data-i18n="exit" data-key>Exit</button>
                    </div>
                </div>
                <div class="panel" id="panel-error">
                    <p>
                        <span data-i18n="you-can-seek-for-help-with-detailed-info-below">You can seek for help with detailed info below.</span>
                    </p>
                    <div id="error-record" class="selectable"></div>
                </div>
            </div>
            <div class="compact-menu">
                <button class="compact-button" data-panel="panel-print" data-i18n="print" data-key="z">Print</button>
                <button class="compact-button active" data-panel="panel-help" data-i18n="help" data-key="x">Help</button>
                <button class="compact-button" data-panel="panel-settings" data-i18n="settings" data-key="c">Settings</button>
            </div>
            <div class="center">
                <!--  -->
            </div>
        </div>
        <div class="canvas-side">
            <div id="control-overlay">
                <div>
                    <button id="insert-picture" data-i18n="insert-picture" data-key="Enter">Insert Picture</button>
                    <button id="insert-text" data-i18n="insert-text" data-key="\">Insert Text</button>
                    <p data-i18n="or-drag-file-to-below" class="hide-on-android">Or drag file to below</p>
                </div>
            </div>
            <div class="canvas-group">
                <canvas id="canvas" width="384" height="384"></canvas>
                <canvas id="preview" width="384" height="384"></canvas>
            </div>
            <div class="center buttons">
                <!-- <button id="canvas-expand" data-i18n="expand">Expand</button>
                <button id="canvas-crop" data-i18n="crop">Crop</button> -->
                <button id="button-reset" data-i18n="reset" data-key>Reset</button>
                <button id="button-print" data-i18n="print" data-key=" ">Print</button>
            </div>
            <div class="blank"></div>
        </div>
    </main>
    <div id="hidden" class="hard-hidden">
        <!-- Hidden area for putting dynamic elements -->
        <input type="file" id="file" />
        <img src="" id="img" alt="hidden-image" />
        <div id="accessibility">
            <div>
                <h2>
                    <span>🌎</span>
                    <span data-i18n="language">Language</span>
                </h2>
                <select multiple id="select-language" data-key="a">
                </select>
                <br />
                <span id="hint-tab-control" class="hide-on-android"
                 data-i18n="to-enter-keyboard-mode-press-tab">To enter Keyboard Mode, press Tab</span>
                <br />
            </div>
            <div>
                <h2 data-i18n="layout">Layout</h2>
                <label class="label-input-span">
                    <input type="checkbox" name="dark-theme" data-key />
                    <span data-i18n="dark-theme">Dark Theme</span>
                </label>
                <label class="label-input-span">
                    <input type="checkbox" name="high-contrast" data-key />
                    <span data-i18n="high-contrast">High Contrast</span>
                </label>
                <label class="label-input-span">
                    <input type="checkbox" name="no-animation" data-key />
                    <span data-i18n="disable-animation">Disable Animation</span>
                </label>
                <label class="label-input-span">
                    <input type="checkbox" name="force-rtl" data-key />
                    <span data-i18n="right-to-left-text-order">Right-to-left text order</span>
                </label>
                <label class="label-input-span">
                    <input type="checkbox" name="large-font" data-key />
                    <span data-i18n="large-font">Large Font</span>
                </label>
            </div>
        </div>
        <div id="text-input">
            <h1 data-i18n="insert-text">Insert Text</h1>
            <div>
                <div id="text-settings">
                    <div name="font-and-size" class="text-settings-group">
                        <select id="text-font" contenteditable="true" data-key>
                            <option value="serif" data-i18n="serif">Serif</option>
                            <option value="sans-serif" data-i18n="sans-serif" selected>Sans Serif</option>
                            <option value="monospace" data-i18n="monospace">Monospace</option>
                            <option value="Unifont" data-i18n="unifont">Unifont</option>
                        </select>
                        <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
                    </div>
                    <div name="wrap-and-align" class="text-settings-group">
                        <label>
                            <input type="checkbox" name="wrap-words-by-spaces" data-key checked />
                            <span data-i18n="wrap-words-by-spaces">Wrap words by spaces</span>
                        </label>
                        <span class="text-align-container">
                            <input type="radio" name="text-align" value="left" data-key checked />
                            <span class="text-align-checkmark text-align-left"></span>
                        </span>
                        <span class="text-align-container">
                            <input type="radio" name="text-align" value="center" data-key />
                            <span class="text-align-checkmark text-align-center"></span>
                        </span>
                        <span class="text-align-container">
                            <input type="radio" name="text-align" value="right" data-key />
                            <span class="text-align-checkmark text-align-right"></span>
                        </span>
                    </div>
                </div>
                <div id="text-textarea">
                    <textarea id="insert-text-area" data-key="/"></textarea>
                </div>
            </div>
        </div>
        <iframe id="frame" src="about:blank" name="frame" title="frame" data-key="v"></iframe>
    </div>
    <div id="dialog" class="hidden">
        <div class="shade"></div>
        <div class="content">
            <div id="dialog-content">
                <!-- Dialog content -->
            </div>
            <div id="dialog-choices">
                <input id="dialog-input" type="text" placeholder="" data-key="m">
                <hr />
            </div>
        </div>
    </div>
    <div id="loading-screen">
        <div class="logo"></div>
        <div class="dots">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <noscript>
            <p class="noscript">
                <span>Please enable JavaScript!</span><br />
                <a href="jslicense.html" data-i18n="javascript-license-information"
                data-jslicense="1" tabindex="1" >JavaScript License Information</a>
            </p>
        </noscript>
    </div>
    <div id="keyboard-shortcuts-layer"></div>
    <script src="loader.js"></script>
</body>
</html>
